<template>
  <div class="analytics">
    <h2>数据分析</h2>
    <a-row :gutter="[16, 16]">
      <a-col :xs="24" :md="12">
        <a-card class="analytics-card hover:shadow-lg transition-shadow duration-300">
          <template #title>
            <span class="text-lg font-semibold">销售趋势</span>
          </template>
          <v-chart class="chart" :option="salesTrendOption" autoresize />
        </a-card>
      </a-col>
      <a-col :xs="24" :md="12">
        <a-card class="analytics-card hover:shadow-lg transition-shadow duration-300">
          <template #title>
            <span class="text-lg font-semibold">用户增长</span>
          </template>
          <v-chart class="chart" :option="userGrowthOption" autoresize />
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="[16, 16]" style="margin-top: 20px;">
      <a-col :xs="24" :md="12">
        <a-card class="analytics-card hover:shadow-lg transition-shadow duration-300">
          <template #title>
            <span class="text-lg font-semibold">热门商品</span>
          </template>
          <v-chart class="chart" :option="popularProductsOption" autoresize />
        </a-card>
      </a-col>
      <a-col :xs="24" :md="12">
        <a-card class="analytics-card hover:shadow-lg transition-shadow duration-300">
          <template #title>
            <span class="text-lg font-semibold">订单状态分布</span>
          </template>
          <v-chart class="chart" :option="orderStatusOption" autoresize />
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { LineChart, BarChart, PieChart } from "echarts/charts";
import {
  GridComponent,
  TooltipComponent,
  TitleComponent,
  LegendComponent
} from "echarts/components";
import VChart from "vue-echarts";

use([
  CanvasRenderer,
  LineChart,
  BarChart,
  PieChart,
  GridComponent,
  TooltipComponent,
  TitleComponent,
  LegendComponent
]);

const salesTrendOption = {
  title: {
    text: '月度销售趋势'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [150, 230, 224, 218, 135, 147],
    type: 'line'
  }]
};

const userGrowthOption = {
  title: {
    text: '用户增长'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [50, 80, 120, 180, 250, 320],
    type: 'bar'
  }]
};

const popularProductsOption = {
  title: {
    text: '热门商品 Top 5'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['商品E', '商品D', '商品C', '商品B', '商品A']
  },
  series: [{
    name: '销量',
    type: 'bar',
    data: [120, 200, 150, 80, 70]
  }]
};

const orderStatusOption = {
  title: {
    text: '订单状态分布'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '订单状态',
      type: 'pie',
      radius: '50%',
      data: [
        {value: 1048, name: '待处理'},
        {value: 735, name: '处理中'},
        {value: 580, name: '已完成'},
        {value: 484, name: '已取消'}
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
</script>

<style scoped>
.analytics {
  padding: 24px;
}

.analytics-card {
  height: 100%;
}

.chart {
  height: 300px;
}
</style>

